<template>
  <div id="payrollDetails">
    <div class="pageStatistics">
      <p class="detailsName">{{payrollData.name}}&nbsp;{{formatDate(payrollData.createTime)}}</p>
      <p class="dataItem"> <span>工资周期：</span>{{payrollData.wagesCycle}} </p>
      <p class="dataItem"> <span>个税所属期：</span>{{`${payrollData.taxYear}.${('0'+payrollData.taxMonth).slice(-2)}`}} </p>
    </div>
    <div class="pageHead">
      <el-form ref="listQuery" :model="listQuery" class="listQuery">
        <el-form-item>
          <MultipleDepartments ref="departmentsSelect" :subId="payrollData.subId" />
        </el-form-item>
        <el-form-item>
          <el-input placeholder="人员、工号" v-model="listQuery.usernamecode" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  :loading="tableLoading" @click="handleSearch">搜索</el-button>
          <MoreSearchPop :visible.sync="isShowMoreSearch" ref="moreSearch" :formProps="[{ label: '岗位', prop: 'workname' }, { label: '员工类型', prop: 'usertype' }]" />
        </el-form-item>
        <el-form-item style="float: right;text-align: right;margin-right:0;">
          <el-button type="primary"  @click="handleExport">导出代发表格</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="pageMain">
      <div class="tableContent">
        <el-table :data="tableData" style="width: 100%;" height="100%" v-loading='tableLoading' size='medium' class="pageInnerTable">
          <!-- <el-table-column align="center" type="selection" /> -->
          <el-table-column align="left" prop="username" label="姓名" />
          <el-table-column align="left" prop="worknumber" label="工号" />
          <el-table-column align="left" prop="cardtype" label="证件类型" />
          <el-table-column align="left" prop="cardnumber" label="证件号码" width="160" />
          <el-table-column align="left" prop="departname" label="部门" />
          <el-table-column align="left" prop="workname" label="岗位" />
          <el-table-column align="right" prop="yfmoneys" label="应发工资" />
          <el-table-column align="right" prop="ysmoneys" label="应税工资" />
          <el-table-column align="right" prop="grsdsmoneys" label="个人所得税" />
          <el-table-column align="right" prop="sfmoneys" label="实发工资" />
          <el-table-column align="left" prop="openbanksname" label="开户银行" />
          <el-table-column align="left" prop="banksnumber" label="银行卡号" />
          <el-table-column align="left" prop="openbanksdetial" label="开户行" />
        </el-table>
      </div>
      <!-- <el-pagination :small="true" background @size-change="" @current-change="(value) => handleSearchChange(value,'Page')" :current-page="listQuery.PageIndex" :page-sizes=[10,20,50] :page-size="listQuery.PageSize" layout="total, sizes, prev, pager, next, jumper" :total=total class="pagingChild"></el-pagination> -->
    </div>
  </div>
</template>
<script>
import MoreSearchPop from '@/views/personnelRegulate/rewardManagement/components/MoreSearchPop.vue';
import MultipleDepartments from "@/views/personnelRegulate/rewardManagement/components/MultipleDepartments.vue";
import { math } from '@/util/math.js';
export default {
  name: 'payrollDetails',
  components: {
    MoreSearchPop,
    MultipleDepartments
  },
  data() {
    return {
      listQuery: {
        usernamecode: '', // 工号/用户名
        workname: '', // 职位
        usertype: '', // 员工类型
        WagesId: ''
        // departmentid: '', // 部门id
      },
      activeDeptList: [],
      isConfirmLoading: false,
      tableData: [],
      tableLoading: false,
      total: 0,
      isShowMoreSearch: false,
    };
  },
  computed: {
    payrollData() {
      console.log(this.$store.state.reward.payrollRouteData, 'this.$store.state.reward.payrollRouteData');
      return this.$store.state.reward.payrollRouteData;
    },
  },
  methods: {
    searchDataList() {
      this.tableLoading = true;
      let params = "";
      this.listQuery.WagesId = this.payrollData.id;
      for (const key in this.listQuery) {
        if (Object.hasOwnProperty.call(this.listQuery, key)) {
          const element = this.listQuery[key];
          if (element && `${element}`.length > 0) {
            if (params.length == 0) {
              params += `?${key}=${element}`;
            } else {
              params += `&${key}=${element}`;
            }

          }
        }
      }
      this.$api.payrollCredit
        .GetPayrollCreditDetialView(params, this.activeDeptList)
        .then(res => {
          console.log(res);
          this.tableData = this.formatTableData(res.data.data);
          // this.tableData = res.data.data;
          // this.total = res.data.data.totalCount;
        })
        .finally(() => {
          this.tableLoading = false;
        });

    },
    
    formatTableData(listData) {
      return listData.map(e => {
        for (const key in e) {
          if(['yfmoneys', 'ysmoneys', 'grsdsmoneys', 'sfmoneys'].includes(key)) {
            e[key] = math.toFixed(e[key]);
          }
        }
        return e;
      });
    },
    exportData(params, data) {
      this.$api.payrollCredit
        .ExcelOutPayCredit(params, data)
        .then(res => {
          if (res.data.status == 200) {
            console.log('代发工资详情数据导出', res);
            if (res.data.status == 200) {
              // console.log(res.data.data);
              const a = document.createElement('a');
              a.setAttribute('href', res.data.data);
              a.setAttribute('download', '');
              a.click();
            } else {
              this.$message.warning(res.data.message);
            }
          }
        });
    },
    formatDate(date) {
      let updateDate = new Date(date);
      return `${updateDate.getFullYear()}年${updateDate.getMonth() + 1}月`;
    },
    handleSearch() {
      if (this.isShowMoreSearch) {
        const { workname, usertype } = this.$refs.moreSearch.getFormData();
        this.listQuery.workname = workname;
        this.listQuery.usertype = usertype;
      } 
      this.isShowMoreSearch = false;
      // 从部门多选组件获取部门id数组
      this.activeDeptList = this.$refs.departmentsSelect.getDepartments();
      this.searchDataList();
    },
    handleExport() {
      // if (this.batchList.length == 0) {
      //   return this.$message.warning('请勾选需要导出的数据');
      // }
      const params = {
        Stype: 2,
        Wagesid: this.payrollData.id
      };
      const data = this.tableData.map(e => e.userId);
      this.exportData(params, data);
    },
    // handleSelectChange(selection) {
    //   this.batchList = selection;
    // }
  },
  activated() {
    console.log(this.$store.state.reward.payrollRouteData);
    this.searchDataList();

  },
};
</script>
<style lang="less" scoped>
@import url('../less/common.less');
#payrollDetails {
  .pageStatistics {
    height: 40px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #dcdfe6;
    color: #666666;
    margin-bottom: 5px;
    .detailsName {
      font-weight: 600;
      font-size: 17px;
      margin-right: 20px;
    }
    .dataItem {
      font-size: 14px;
      margin: 0 15px;
    }
  }
  .pageMain {
    height: calc(100% - 97px);
  }
  .tableContent {
    padding: 0;
  }
  .pagingChild {
    float: right;
    margin-right: 10px;
    margin-top: 5px;
    .el-pagination__total {
      line-height: 28px;
    }
  }
  .listQuery {
    :deep(.el-form-item) {
      float: left;
      width: 150px;
      margin-right: 15px;
      .el-input {
        width: 100%;
      }
    }
  }
}
</style>